<template>
  <div>
  <el-dialog
    v-model="visibleModel"
    title="订单操作记录"
    style="height:400px; width:100%; max-width:700px;display:flex;flex-direction:column;"
    align-center
    draggable
    @close="handleClose"
  >
    <div class="log-list" v-for="(item, index) in logData" :key="item.id" v-if="logData.length > 0">
        <div class="list-item" style="display: flex; column-gap: 15px;">
            <div>模块：{{ item.module }}</div>
            <div>类型：{{ item.type }}</div>
        </div>
        <div class="list-item">描述：{{ item.description ?? "无" }}</div>
        <div class="list-item" style="display: flex; column-gap: 15px;">
            <div>操作者：{{ item.operator }}</div>
            <div>IP：{{ item.operatorIp }}</div>
            <div>时间：{{ item.operationTime }}</div>
        </div>
        <div class="list-item" style="display: flex; column-gap: 15px;">
            <div>状态：{{ item.success ? "成功" : "失败" }}</div>
            <div>错误信息：{{ item.errMsg ?? "无" }}</div>
        </div>
    </div>
    <div v-else style="text-align: center; margin-top: 20px;">暂无历史数据</div>
    <template #footer>
        <div class="pagination-box" v-if="logData.length > 0">
          <el-pagination 
            layout="sizes, prev, pager, next" 
            :total="pageination.total"
            v-model:current-page="pageination.pageNum"
            v-model:page-size="pageination.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, watch } from 'vue';
import { getLogList } from '@/pages/home/views/sale/api/other'
const visibleModel = defineModel()

const { logType } = defineProps<{
    logType: string
}>()
const logData = ref<LogData[]>([])
const pageination = ref({
    pageNum: 1,
    pageSize: 5,
    total: 0
})
const handleClose = () => {
    visibleModel.value = false
}
const handleCurrentChange = (val) => {
    pageination.value.pageNum = val
    getLogTableData()
}
const handleSizeChange = (val) => {
    pageination.value.pageSize = val
    getLogTableData()
}
const getLogTableData = async () => {
    const res = await getLogList({
        operator: localStorage.getItem("username") ?? "user",
        module: logType,
        pageNum: pageination.value.pageNum,
        pageSize: pageination.value.pageSize
    })
    pageination.value.total = res.data.data.total
    logData.value = res.data.data.list
    console.log("logData: ", logData.value)
}
defineExpose({
    getLogTableData
})

interface LogData {
    id: number,
    module: string,
    type: string,
    description: string,
    operator: string,
    operatorIp: string,
    operationTime: string,
    success: boolean,
    errMsg: string
}
</script>

<style scoped>
.log-list {
    background: #f0f1f4;
    margin: 10px 0;
    padding: 5px 10px;
}
.list-item {
    margin: 5px 0;
}
:deep(.el-dialog__body) {
    overflow: auto;
    flex: 1;
}
:deep(.el-dialog__header){
    padding-bottom: 0;
}
.pagination-box {
    display: flex;
    justify-content: flex-start;
}
</style>